<template>
	<view class="container">
		<!-- 老师基本信息 -->
		<view class="profile-section">
			<view class="profile-header">
				<view class="avatar-container">
					<image class="avatar" :src="teacherInfo.avatar" mode="aspectFill"></image>
					<view class="gender-badge male">♂</view>
				</view>

				<view class="profile-info">
					<view class="name-row">
						<text class="teacher-name">{{ teacherInfo.name }}</text>
						<view class="action-icons">
							<text class="action-icon" @click="toggleFavorite">⭐</text>
							<text class="action-icon" @click="shareProfile">📤</text>
						</view>
					</view>

					<view class="basic-tags">
						<view class="tag blue-tag">{{ teacherInfo.gender }}</view>
						<view class="tag blue-tag">{{ teacherInfo.age }}岁</view>
						<view class="tag green-tag">{{ teacherInfo.role }}</view>
					</view>

					<view class="certification">
						<view class="cert-tag">已认证</view>
					</view>
				</view>
			</view>

			<view class="education-info">
				<view class="education-item">
					<text class="education-text">{{ teacherInfo.university }}</text>
					<text class="education-years">{{ teacherInfo.enrollmentYears }}</text>
					<text class="check-icon">✓</text>
				</view>
				<view class="location-info">
					<text class="location-text">{{ teacherInfo.location }}</text>
				</view>
			</view>
		</view>

		<!-- 辅导详情 -->
		<view class="tutoring-section">
			<view class="section-title">辅导详情</view>

			<!-- 辅导方式 -->
			<view class="detail-item">
				<text class="detail-label">辅导方式</text>
				<view class="method-buttons">
					<view class="method-btn" v-for="method in teacherInfo.tutoringMethods" :key="method">
						{{ method }}
					</view>
				</view>
			</view>

			<!-- 上门区域 -->
			<view class="detail-item">
				<text class="detail-label">上门区域</text>
				<view class="area-buttons">
					<view class="area-btn" >
						{{ teacherInfo.serviceAreas }}
					</view>
				</view>
			</view>

			<!-- 可教科目 -->
			<view class="detail-item">
				<view class="subjects-header">
					<text class="detail-label">可教科目</text>
					<view class="price-info">
						<text class="price-label">薪酬参考</text>
						<text class="price-value">￥{{ teacherInfo.hourlyRate }}</text>
					</view>
				</view>
				<view class="subject-buttons">
					<view class="subject-btn" v-for="subject in teacherInfo.subjects" :key="subject">
						{{ subject }}
					</view>
				</view>
			</view>

			<!-- 可教时间 -->
			<view class="detail-item" v-if="availableTimes.length>0">
				<text class="detail-label">可教时间</text>
				<view class="time-grid">
					<view class="time-header">
						<view class="time-cell"></view>
						<view class="time-cell" v-for="day in timeSlots.days" :key="day">{{ day }}</view>
					</view>
					<view class="time-row" v-for="period in timeSlots.periods" :key="period">
						<view class="time-cell period-label">{{ period }}</view>
						<view class="time-cell" v-for="day in timeSlots.days" :key="day">
							<view class="time-check" v-if="isTimeAvailable(day, period)">✓</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 自我评价 -->
		<view class="evaluation-section">
			<view class="section-title">自我评价</view>
			<view class="evaluation-content">
				<text class="evaluation-text">{{ teacherInfo.selfEvaluation }}</text>
			</view>
		</view>

		<!-- 经验介绍 -->
		<view class="experience-section">
			<view class="section-title">经验介绍</view>
			<view class="experience-list">
				<view class="experience-item" >
					<text class="bullet">•</text>
					<text class="experience-text">{{ teacherInfo.experiences }}</text>
				</view>
			</view>
		</view>

		<!-- 所获证书 -->
		<view class="certificates-section">
			<view class="section-title">所获证书</view>
			<view class="certificates-list">
				<view class="certificate-item" >
					<text class="bullet">•</text>
					<text class="certificate-text">{{ teacherInfo.certificates }}</text>
				</view>
			</view>
		</view>

		<!-- 底部固定按钮 -->
		<view class="bottom-actions">
			<view class="action-buttons">
				<u-button type="primary" :plain="true" text="联系客服" icon="chat" @click="contactService"></u-button>
				<u-button type="primary" text="预约教员任教" @click="bookTeacher"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTeacherDetail
	} from '@/utils/mockApi.js';
	import * as api from '@/api/family'
	/**
	 * 老师详情页面
	 * 展示老师的详细信息和教学能力
	 */
	export default {
		name: 'TeacherDetailPage',
		data() {
			return {
				teacherId: '', // 老师ID
				teacherInfo: {
					name: '',
					gender: '',
					age: 0,
					role: '',
					avatar: '',
					university: '',
					enrollmentYears: '',
					location: '',
					tutoringMethods: [],
					serviceAreas: [],
					subjects: [],
					hourlyRate: 0,
					selfEvaluation: '',
					experiences: [],
					certificates: []
				},
				timeSlots: {
					days: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
					periods: ['上午', '下午', '晚上']
				},
				availableTimes: [],
				loading: true
			}
		},
		onLoad(options) {
			// 从路由参数获取老师ID
			if (options.id) {
				this.teacherId = options.id;
				this.loadTeacherDetail(options.id);
			} else {
				uni.navigateBack()
			}
		},
		methods: {
			/**
			 * 加载老师详情
			 * @param {string} id - 老师ID
			 */
			async loadTeacherDetail(id) {
				this.loading = true;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});

				try {
					await api.getTeacherDetailApi(id).then(response=>{
						uni.hideLoading();
						if (response.code === 200 && response.data) {
							// 加载成功，更新数据
							const teacher = response.data;
							this.teacherInfo = {
								name: teacher.name,
								gender: teacher.gender,
								age: teacher.age,
								role: teacher.role,
								avatar: teacher.teacherAvatar,
								university: teacher.school,
								enrollmentYears: teacher.teachingExperience,
								location: teacher.livingArea,
								tutoringMethods: teacher.teachingMethod,
								serviceAreas: teacher.serviceArea,
								subjects: teacher.sub,
								hourlyRate: teacher.startingSalary,
								selfEvaluation: teacher.selfEvaluation,
								experiences: teacher.teachingExperienceDesc,
								certificates: teacher.certificateDesc
							};
							this.availableTimes = teacher.teacherTime || {};
							this.loading = false;
						} else {
							// 加载失败
							uni.showModal({
								title: '加载失败',
								content: response.message || '老师信息不存在',
								showCancel: false,
								success: () => {
									uni.navigateBack();
								}
							});
						}
					});

					
				} catch (error) {
					uni.hideLoading();
					console.error('加载老师详情失败:', error);
					uni.showModal({
						title: '加载失败',
						content: '网络错误，请检查网络后重试',
						showCancel: false,
						success: () => {
							uni.navigateBack();
						}
					});
				}
			},

			/**
			 * 切换收藏状态
			 */
			toggleFavorite() {
				uni.showToast({
					title: '已收藏',
					icon: 'success',
					duration: 1000
				});
			},

			/**
			 * 分享老师资料
			 */
			shareProfile() {
				uni.showActionSheet({
					itemList: ['分享给朋友', '分享到朋友圈', '复制链接'],
					success: (res) => {
						const actions = ['分享给朋友', '分享到朋友圈', '复制链接'];
						uni.showToast({
							title: `已${actions[res.tapIndex]}`,
							icon: 'success',
							duration: 1500
						});
					}
				});
			},

			/**
			 * 检查时间段是否可用
			 * @param {string} day - 星期几
			 * @param {string} period - 时间段
			 */
			isTimeAvailable(day, period) {
				if(period == "上午"){
					period = 0
				}else if(period == "下午"){
					period = 1
				}else{
					period = 2
				}
				return this.availableTimes[period][day]
			},

			/**
			 * 联系客服
			 */
			contactService() {
				uni.showModal({
					title: '联系客服',
					content: '是否拨打客服电话？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '正在为您转接客服',
								icon: 'none'
							})
						}
					}
				})
			},

			/**
			 * 预约老师
			 */
			bookTeacher() {
				uni.navigateTo({
					url: "/pages/jiajiao/booking",
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/uni.scss";

	/* 页面容器 */
	.container {
		background: white;
		min-height: 100vh;
		padding-bottom: 120rpx;
		/* 为底部按钮留出空间 */
	}

	/* 老师基本信息区域 */
	.profile-section {
		padding: 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.profile-header {
		display: flex;
		gap: 24rpx;
		margin-bottom: 24rpx;
	}

	.avatar-container {
		position: relative;
		flex-shrink: 0;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		background: #f0f0f0;
	}

	.gender-badge {
		position: absolute;
		top: -8rpx;
		left: -8rpx;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		font-weight: bold;
		color: white;

		&.male {
			background: #4A90E2;
		}
	}

	.profile-info {
		flex: 1;
	}

	.name-row {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 16rpx;
	}

	.teacher-name {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
	}

	.action-icons {
		display: flex;
		gap: 16rpx;
	}

	.action-icon {
		font-size: 32rpx;
		padding: 8rpx;
	}

	.basic-tags {
		display: flex;
		gap: 12rpx;
		margin-bottom: 16rpx;
		flex-wrap: wrap;
	}

	.tag {
		padding: 6rpx 12rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-weight: 500;

		&.blue-tag {
			background: #E3F2FD;
			color: #1976D2;
		}

		&.green-tag {
			background: #E8F5E8;
			color: #4CAF50;
		}
	}

	.certification {
		display: flex;
		margin-bottom: 16rpx;
	}

	.cert-tag {
		background: #FFF3E0;
		color: #FF8F00;
		padding: 6rpx 12rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		font-weight: 500;
	}

	.education-info {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.education-item {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.education-text {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.education-years {
		font-size: 24rpx;
		color: #666;
	}

	.check-icon {
		font-size: 20rpx;
		color: #ff6b35;
		font-weight: bold;
	}

	.location-text {
		font-size: 26rpx;
		color: #666;
	}

	/* 辅导详情区域 */
	.tutoring-section {
		padding: 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 24rpx;
	}

	.detail-item {
		margin-bottom: 32rpx;
	}

	.detail-item:last-child {
		margin-bottom: 0;
	}

	.detail-label {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 16rpx;
		display: block;
	}

	.method-buttons,
	.area-buttons {
		display: flex;
		gap: 12rpx;
		flex-wrap: wrap;
	}

	.method-btn,
	.area-btn {
		background: #f5f5f5;
		color: #666;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
	}

	.subjects-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.price-info {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.price-label {
		font-size: 24rpx;
		color: #666;
	}

	.price-value {
		font-size: 28rpx;
		color: #ff6b35;
		font-weight: bold;
	}

	.subject-buttons {
		display: flex;
		gap: 12rpx;
		flex-wrap: wrap;
	}

	.subject-btn {
		background: #E8F5E8;
		color: #4CAF50;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
	}

	/* 时间表格 */
	.time-grid {
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.time-header {
		display: flex;
		background: #f8f8f8;
	}

	.time-row {
		display: flex;
		border-top: 1rpx solid #e0e0e0;
	}

	.time-cell {
		flex: 1;
		padding: 16rpx 8rpx;
		text-align: center;
		font-size: 24rpx;
		color: #666;
		border-right: 1rpx solid #e0e0e0;
		min-height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.time-cell:last-child {
		border-right: none;
	}

	.period-label {
		background: #f8f8f8;
		font-weight: 500;
	}

	.time-check {
		color: #4CAF50;
		font-weight: bold;
		font-size: 20rpx;
	}

	/* 自我评价区域 */
	.evaluation-section {
		padding: 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.evaluation-content {
		background: #f8f8f8;
		padding: 24rpx;
		border-radius: 12rpx;
	}

	.evaluation-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}

	/* 经验介绍区域 */
	.experience-section {
		padding: 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.experience-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.experience-item {
		display: flex;
		align-items: flex-start;
		gap: 12rpx;
	}

	.bullet {
		color: #ff6b35;
		font-size: 24rpx;
		font-weight: bold;
		margin-top: 4rpx;
	}

	.experience-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		flex: 1;
	}

	/* 所获证书区域 */
	.certificates-section {
		padding: 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.certificates-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.certificate-item {
		display: flex;
		align-items: flex-start;
		gap: 12rpx;
	}

	.certificate-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		flex: 1;
	}

	// 底部固定按钮
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		padding: 20rpx;
		border-top: 2rpx solid #f0f0f0;
		z-index: 100;
		margin-top: 20rpx;
	}

	.action-buttons {
		display: flex;
		gap: 20rpx;
	}

	/* 响应式适配 */
	@media (max-width: 750rpx) {

		.profile-section,
		.tutoring-section,
		.evaluation-section,
		.experience-section,
		.certificates-section {
			padding: 24rpx;
		}

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
		}

		.teacher-name {
			font-size: 36rpx;
		}

		.section-title {
			font-size: 28rpx;
		}

		.detail-label {
			font-size: 26rpx;
		}

		.evaluation-text,
		.experience-text,
		.certificate-text {
			font-size: 26rpx;
		}

		.time-cell {
			font-size: 22rpx;
			padding: 12rpx 6rpx;
			min-height: 50rpx;
		}

		.button-text {
			font-size: 28rpx;
		}

		.button-icon {
			font-size: 28rpx;
		}
	}

	/* 动画效果 */
	.profile-section,
	.tutoring-section,
	.evaluation-section,
	.experience-section,
	.certificates-section {
		animation: fadeInUp 0.3s ease-out;
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.bottom-actions {
		animation: slideInUp 0.3s ease-out 0.1s both;
	}

	@keyframes slideInUp {
		from {
			opacity: 0;
			transform: translateY(100%);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>